<template>
  <view class="permissions-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">我的权限</text>
      <text class="page-subtitle">查看您当前拥有的所有权限</text>
    </view>

    <!-- 权限统计卡片 -->
    <view class="stats-card">
      <view class="stats-item">
        <text class="stats-number">{{ permissions.length }}</text>
        <text class="stats-label">总权限数</text>
      </view>
      <view class="stats-item">
        <text class="stats-number">{{ menuPermissions.length }}</text>
        <text class="stats-label">菜单权限</text>
      </view>
      <view class="stats-item">
        <text class="stats-number">{{ roles.length }}</text>
        <text class="stats-label">角色数量</text>
      </view>
    </view>

    <!-- 角色信息 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">我的角色</text>
      </view>
      <view class="role-list">
        <view 
          v-for="role in roles" 
          :key="role.id" 
          class="role-item"
        >
          <view class="role-info">
            <text class="role-name">{{ role.name }}</text>
            <text class="role-code">{{ role.code }}</text>
          </view>
          <view class="role-status">
            <u-tag 
              :text="role.status === 'ENABLE' ? '启用' : '禁用'"
              :type="role.status === 'ENABLE' ? 'success' : 'error'"
              size="mini"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 菜单权限 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">菜单权限</text>
        <text class="section-subtitle">您可以访问的功能模块</text>
      </view>
      <view class="menu-list">
        <view 
          v-for="menu in menuPermissions" 
          :key="menu.code" 
          class="menu-item"
        >
          <view class="menu-info">
            <u-icon name="menu" size="20" color="#667eea"></u-icon>
            <text class="menu-name">{{ getMenuName(menu.code) }}</text>
          </view>
          <view class="menu-status">
            <u-icon name="checkmark-circle" size="16" color="#67c23a"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 详细权限列表 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">详细权限</text>
        <text class="section-subtitle">您拥有的所有权限详情</text>
      </view>
      <view class="permission-list">
        <view 
          v-for="permission in permissions" 
          :key="permission.id" 
          class="permission-item"
        >
          <view class="permission-info">
            <text class="permission-name">{{ permission.name }}</text>
            <text class="permission-code">{{ permission.code }}</text>
            <text class="permission-desc">{{ permission.description }}</text>
          </view>
          <view class="permission-status">
            <u-tag 
              text="已授权"
              type="success"
              size="mini"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 权限说明 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">权限说明</text>
      </view>
      <view class="permission-help">
        <view class="help-item">
          <u-icon name="info-circle" size="16" color="#909399"></u-icon>
          <text class="help-text">菜单权限：控制您可以访问的功能模块</text>
        </view>
        <view class="help-item">
          <u-icon name="info-circle" size="16" color="#909399"></u-icon>
          <text class="help-text">数据权限：控制您可以查看的数据范围</text>
        </view>
        <view class="help-item">
          <u-icon name="info-circle" size="16" color="#909399"></u-icon>
          <text class="help-text">如需更多权限，请联系系统管理员</text>
        </view>
      </view>
    </view>

    <!-- 刷新按钮 -->
    <view class="refresh-section">
      <u-button 
        type="primary" 
        @click="refreshPermissions"
        :loading="loading"
        class="refresh-button"
      >
        {{ loading ? '刷新中...' : '刷新权限' }}
      </u-button>
    </view>
  </view>
</template>

<script>
import { hasMenuPermission } from '@/utils/permission.js'

// 作者：Wu.Liang
export default {
  name: 'Permissions',
  data() {
    return {
      // 权限列表
      permissions: [],
      // 菜单权限
      menuPermissions: [],
      // 角色列表
      roles: [],
      // 加载状态
      loading: false,
      // 菜单名称映射
      menuNameMap: {
        'user:menu': '用户管理',
        'role:menu': '角色管理',
        'permission:menu': '权限管理',
        'resident:menu': '居民管理',
        'property:menu': '物业管理',
        'parking:menu': '停车管理',
        'payment:menu': '缴费管理',
        'complaint:menu': '投诉建议',
        'emergency:menu': '紧急求助',
        'security:menu': '安防监控',
        'services:menu': '便民服务'
      }
    }
  },

  onLoad() {
    // 页面权限验证
    if (!validatePagePermission('user:menu')) {
      return
    }
    
    // 获取权限信息
    this.getMenuPermissions()
  },

  methods: {
    /**
     * 获取权限信息
     */
    async getMenuPermissions() {
      this.loading = true

      try {
        // 并行获取权限、菜单和角色信息
        const [permissionsRes, menusRes, rolesRes] = await Promise.all([
          this.$api.user.getUserPermissions(),
          this.$api.user.getUserMenus(),
          this.$api.user.getUserRoles()
        ])

        if (permissionsRes.code === 200) {
          this.permissions = permissionsRes.data || []
        }

        if (menusRes.code === 200) {
          this.menuPermissions = menusRes.data || []
        }

        if (rolesRes.code === 200) {
          this.roles = rolesRes.data || []
        }

      } catch (error) {
        uni.showToast({
          title: '获取权限信息失败',
          icon: 'error'
        })
      } finally {
        this.loading = false
      }
    },

    /**
     * 刷新权限信息
     */
    async refreshPermissions() {
      await this.getMenuPermissions()
      
      uni.showToast({
        title: '权限信息已刷新',
        icon: 'success'
      })
    },

    /**
     * 获取菜单名称
     */
    getMenuName(menuCode) {
      return this.menuNameMap[menuCode] || menuCode
    }
  }
}
</script>

<style lang="scss" scoped>
.permissions-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx 40rpx;
  text-align: center;

  .page-title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10rpx;
  }

  .page-subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.stats-card {
  background: #ffffff;
  margin: -20rpx 20rpx 20rpx;
  border-radius: 16rpx;
  padding: 40rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  .stats-item {
    text-align: center;

    .stats-number {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: #667eea;
      margin-bottom: 10rpx;
    }

    .stats-label {
      font-size: 24rpx;
      color: #666666;
    }
  }
}

.section {
  background: #ffffff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;

  .section-header {
    padding: 30rpx 40rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .section-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 10rpx;
    }

    .section-subtitle {
      font-size: 24rpx;
      color: #999999;
    }
  }
}

.role-list {
  .role-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .role-info {
      .role-name {
        display: block;
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 8rpx;
      }

      .role-code {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}

.menu-list {
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .menu-info {
      display: flex;
      align-items: center;

      .menu-name {
        font-size: 32rpx;
        color: #333333;
        margin-left: 20rpx;
      }
    }
  }
}

.permission-list {
  .permission-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .permission-info {
      flex: 1;

      .permission-name {
        display: block;
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 8rpx;
      }

      .permission-code {
        display: block;
        font-size: 24rpx;
        color: #999999;
        margin-bottom: 8rpx;
      }

      .permission-desc {
        font-size: 24rpx;
        color: #666666;
        line-height: 1.4;
      }
    }
  }
}

.permission-help {
  padding: 30rpx 40rpx;

  .help-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .help-text {
      font-size: 28rpx;
      color: #666666;
      line-height: 1.4;
      margin-left: 16rpx;
    }
  }
}

.refresh-section {
  padding: 40rpx 20rpx;

  .refresh-button {
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
  }
}
</style> 